<script type="text/javascript">

    function onReady(){
        /*
        todo codigo javascript que se agregue a la aplicacion
        deberia ir dentro de una funcion onReady.
        Si van a agregar js, creen una funcion onReady y ahi metan
        lo que quieran.
        En el template general he agregado un listener cuando el documento
        completo carga y todos los objetos del DOM (botones, formularios,
        divs y todas esas mariconadas) son accesibles.

        En resumen: Siempre que la pagina carga, se busca la funcion onReady
        en su vista y se ejecuta.
        */


        /*
        ahora...
        con esto se agrega un event listener al elemento btnBuscar
        que esta definido en buscar.php con el helper
        latisoft_button("btnBuscar", "", "Buscar", 'primary');
        El primer atributo de mi helper setea el atributo id y name del objeto.
        No es necesario que agreguen un atributo onclick al boton,
        haganlo de esta forma si pueden, con listener es mas ordenado.
        Esto es jQuery. En jQuery Para hacer referencia a un elemento cualquiera
        con id = EL_ID_EJEMPLO, se hace con $("#EL_ID_EJEMPLO")
        El metodo click agrega el listener y adentro va una funcion anonima
        que se ejecutara cuando hagan click en el boton
        */        

        $("#btnBuscar").click(
            function(){//btnBuscar_clickCallback BEGIN
                
                /*
                con esto hacen una llamada al famoso ajax...
                Con ajax puedes consultar cierta informacion -como por ejemplo
                buscar personal- y recibes la respuesta sin actualizar la pagina.
                Una vez recibida la respuesta puedes actualizar tus elementos del DOM
                via javascript.
                Hay varios campos que son floro.
                Solo 2 son importantes, estan comentados
                */
                $.ajax(
                    {
                        /*
                        !!! url: indica de donde se va a consultar la informacion.
                        No se si es buen estandar, pero he decidido definir en el controlador
                        correspondiente (personal), los metodos que voy a usar para llamar con ajax.
                        Los voy a nombrar con "ws" al comienzo (web service? :S)...
                        Pueden ver el controlador personal y el metodo wsBuscar para que se hagan
                        una idea de como se envia la data
                        */
                        url: <?php echo "'".base_url()."personal/wsBuscar'"; ?>,
                        //floro
                        type: 'GET',
                        dataType: 'json',
                        cache: false,
                        beforeSend: function() {
                            //esta vaina no importa
                        },
                        /*
                        !!! success: es la funcion que se ejecuta cuando recibimos la respuesta de la
                        consulta que hicimos a la url (personal/wsBuscar). La data recibida la reciben
                        en el argumento data.
                        Esta es la parte en la que deben actualizar sus elementos en base a
                        la respuesta recibida. En mi caso, voy a actualizar un elemento DIV vacio
                        llamado "resultados" que ya defini en mi vista buscar.php, y le voy a meter
                        una tabla con los empleados que recibi.
                        */
                        success: function(data){
                            /*
                            Esto es para crear el html de la tabla
                            con unos nuevos helpers que hice
                            Son parecidos a los de php, pero ahora para js :P
                            */
                            var strResultados = "";
                            strResultados = latisoft_openTable("Nombres", "Apellido Paterno");
                            for (var i in data){
                                var empleado = data[i];
                                strResultados += latisoft_tableRow(empleado.Nombres, empleado.Apellido_Paterno);
                            }
                            strResultados += latisoft_closeTable();
                            /*
                            aca ya tenemos el contenido que deseamos mostrar
                            en la variable strResultados
                            */

                            //le asigno esa variable a mi DIV resultados, para que lo muestre como contenido
                            $("#resultados").html(strResultados);
                            //ya esta la pagina con informacion actualizada, sin haberla recargado


                            /*
                            este es un helper para que la pagina se mueva a donde esta el resultado
                            hay un marcador en buscar.php <a name='res'></a>
                            a ese se refiere
                            */
                            latisoft_scrollToAnchor("res");
                        },
                        error: function(xhr, textStatus, errorThrown) {
                            alert("Ha ocurrido un error.");
                        }
                    });
            }//btnBuscar_clickCallback END
        );

    }

</script>